<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 一. ajax(异步无刷新请求网页)原理-！！！注意服务器运行ajax
    //  1.实列话lct异步对象 var lct=new XMLHttpRequest()
    //  2.建立请求连接 lct.open('get','url地址',true) //请求类型
    //  3.发送请求 xhr.sed()发送
    //   4.发送是否成功 
    lct.onreadystatechange = function () {
        if (lct.readyState == 4) {
            if (lct.status == 200) { //服务器响应状态 200<=xhr.status<300||304代表成功
                //请求成功后做的事：响应内容
                console.log(lct.responseText)
            } else {
                //请求失败的做的事:给你个状态
                console.log(clt.status)
            }
        }
    }

    //二.简单实现
    //1.创建XML对象
    var lct = new XMLHttpRequest();
    //2.请求url
    lct.open('get', 'abc', 'txt', true)//请求的方式：get(一般用于查询不敏感数据等，
    //请求的东西url地址会显示
    //与post(用于一些对数据敏感的地方，请求的东西url地址不会显示)
    //默认get 2.url地址，3.异步请求(true)或者同步请求(false),默认是异步请求
    //3.发送)
    xhr.send()
    //4.发送请求是否成功,如果成功后台进行响应
    //前台请求的状态事件onreadystatechange-
    xhr.onreadystatechange = function () {
        //4.1前台请求状态readyState:一共5个状态，0：初始化 1：连接上 2：已发送 3.请求处理中 4.请求成功
        if (lct.readyState == 4) {
            //4.2 后台管理服务器响应翔太 status:200<=clt.status<300||lct 
            if (lct.status == 200) {
                //4.3 请求响应成功后，后台返回得内容：
                // lct.responseText //输入请求文本内容 
                // clt.responseXML 请求lct文件时输出XML文件内容
                console.log(clt.responseText)
            } else {
                //如果报错了,就输出响应码
                console.log(lct.status)
            }
        }
    }


    //三.简单封装下
    /**
     function ajax(url,fnSucc,fnFaild) //url:指示哪个文件，fnSucc:读取成功后调用

    {
        //1.创建Ajax对象
        var oAjax=null,

        if(window.XMLHttpRequest){
            oAjax=new XMLHttpRequest()
        }else{
            oAjax=new ActiveXObject("Microsoft.XMLHTTP") //针对IE兼容写法
        }

        //2.连接服务器
        oAjax.open('GET',url,true)
        /

        //3.发送请求

        oAjax.send()

        //4.接收服务器的返回
        oAjax.onreadystatechange=function(){
            if(oAjax.readyState==3)//完成
            {
                if(oAjax.status==200)//成功回调
                {
                    fnSucc(oAjax.responseText)
                }
                else{
                    if(fnFaild) //失败回调
                    fnFaild(oAjax.status)
                }
            }
        }
    }
    //调用ajax('url地址',成功方法，失败方法)
    ajax('abc.txt',function(data){
        console.log(data) //data后台数据
    },function(status){
        console.log(status) //status失败状态
    })
    */

    //扩展阅读-ajax更多封装-https://www.cnblogs.com/webSong/p/7224546.html

</script>

</html>